<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="assets/css/reset-min.css" rel="stylesheet" type="text/css" /> 
        <link href="assets/css/options.css" rel="stylesheet" type="text/css" /> 
        <title>Metrist Options</title>
    </head>
    <body>
        <div id="page">
            <div id="header">
                <h1>Metrist Options</h1>
            </div>
            <div id="content">
                <form action="#" method="post" id="formMain">
                    <h3>Account</h3>
                    <ul>
                        <li><label>Username:</label>
                        <input type="text" value="" id="conf_twitter_username" />
                            <p>Your twitter's username</p>
                        </li>
                        <li><label>Password:</label>
                            <input type="password" value="" id="conf_twitter_password" />
                            <p>Your twitter's password</p>
                        </li>
                    </ul>

                    <h3>Visual</h3>
                    <ul>
                        <li><label>Fontsize:</label>
                            <select id="conf_fontszie">
                                <option value="small">Small</option>
                                <option value="normal">Normal</option>
                                <option value="large">Large</option>
                                <option value="huge">Huge</option>
                            </select>
                        </li>
                        <li><label>Tabs:</label>
                           <input type="checkbox" id="conf_show_tabs_home"
                           checked="checked" disabled="disabled" /> Home
                           <input type="checkbox" id="conf_show_tabs_mention"
                           checked="checked" /> Mention
                           <input type="checkbox" id="conf_show_tabs_direct"
                           checked="checked" /> Direct Message
                           <input type="checkbox" id="conf_show_tabs_favourite"
                           checked="checked" /> Favourite
                           <p>How many tabs u'd like to show?</p>
                        </li>
                        <li><label>Tweets:</label>
                           <input type="checkbox" id="conf_show_extra"
                           checked="checked" />Show extra tweets infomation
                           <p>For example, this options will show "via some app,
                           in_reply_to somebody" etc. <br />at the ends of each tweets.</p>
                        </li>
                    </ul>

                    <h3>Network</h3>
                    <ul>
                        <li><label>Frequency:</label>
                        Request tweets from twitter each <select id="conf_each_request_time">
                                <option value="2">2</option>
                                <option value="5">5</option>
                                <option value="10">10</option>
                                <option value="15">15</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                            </select> minutes.
                            <p>Twitter limits usage of their API per account.
                            Currently, 150 requests per hour are allowed.  </p>
                        </li>
                        <li><label>Timeout:</label>
                            <input class="small" type="text" value="5" maxlength="2"
                                id="conf_request_timeout_seconds" style="width: 2em; text-align: center;"/> seconds
                            <p>Please adjust timeout according to your network status. </p>
                            <p><em>5 seconds</em> is a good choice by default.</p>
                        </li>
                    </ul>
                    <h3>Advance</h3>
                    <ul>
                        <li><label>Request API:</label>
                            <input type="text" value="" id="conf_twitter_request_api" />
                            <p>By default, Metrist will use twitter's offical API
                            address <em>'http(s)://twitter.com'.</em></p>
                            <p>If you have third party API which can
                            correct request tweets from twitter, this option is very useful for you.</p>
                            <p>PS, pls let this option value <em>DO NOT</em> add the trailing slash.</p>
                        </li>
                        <li><label>Short URL:</label>
                            <input type="checkbox" id="conf_autoexpand_short_url" checked="checked" />
                                Auto expand short url with <a href="http://untr.im/">untr.im</a>
                            <br />
                            Expand url with host
                            <input type="text"
                            id="conf_autoexpand_short_url_host"
                            value="bit.ly,tr.im" />, their splited by ","
                        </li>
                    </ul>

                    <h3>LocalStorage</h3>
                    <ul>
                        <li><label>Stroage limit:</label>
                        Stroage <select id="conf_each_tab_size">
                                <option value="100">100</option>
                                <option value="150">150</option>
                                <option value="200">200</option>
                                <option value="250">250</option>
                                <option value="300">300</option>
                            </select> tweets in each tabs.
                            <p>The local storage of Chrome's plug-in system is
                            limited in size.</p>
                        </li>
                        <li><button id="act:clear_tweets">Clear Local Tweets Cache</a></li>
                    </ul>
                    <h3>Other</h3>
                    <ul>
                        <li><a id="act:visit_homepage" href="http://lab.gracecode.com/metrist/">Metrist's homepage</a></li>
                    </ul>

                    <div class="submit">
                        <button type="submit">Finish!</button>
                    </div>
                </form>
            </div>
            <div id="footer">
                $Id: options.html 314 2009-11-18 02:32:46Z i.feelinglucky $
            </div>
            <script type="text/javascript" src="assets/yui-special/yahoo.js"></script>
            <script type="text/javascript" src="assets/yui-special/dom.js"></script>
            <script type="text/javascript" src="assets/yui-special/event.js"></script>
            <script type="text/javascript" src="assets/yui-special/animation.js"></script>
            <script type="text/javascript" src="assets/scripts/helper.js"></script>
            <script type="text/javascript" src="assets/scripts/twitter.js"></script>
            <script type="text/javascript" src="assets/scripts/tweets.js"></script>
            <script type="text/javascript">
                ~function() {
                    var Y = YAHOO, Lang = Y.lang, Util = Y.util, Dom = Util.Dom, Event = Util.Event;

                    var defaultFields = {
                        'conf_twitter_username': '',
                        'conf_twitter_password': '',
                        'conf_each_request_time': 5,
                        'conf_show_extra': 'yes',
                        'conf_show_tabs_home': 'yes',
                        'conf_show_tabs_mention': 'yes',
                        'conf_show_tabs_direct': 'yes',
                        'conf_show_tabs_favourite': 'yes',
                        'conf_twitter_request_api': 'https://twitter.com',
                        'conf_use_console' : 'no',
                        'conf_autoexpand_short_url': 'yes',
                        'conf_each_tab_size': 150,
                        'conf_autoexpand_short_url_host': 'bit.ly,tr.im,is.gd',
                        'conf_fontszie': 'normal',
                        'conf_request_timeout_seconds' : '5'
                    };

                    for(items in defaultFields) {
                        var input = Dom.get(items);
                        if (input) {
                            switch(input.nodeName.toLowerCase()) {
                                case 'input':
                                    if (/text|password/.test(input.type)) {
                                        input.value = localStorage[items] || defaultFields[items];
                                    } else if (input.type == 'checkbox')  {
                                        input.checked = (localStorage[items] || defaultFields[items]) == 'yes' ? true : false;
                                    }
                                    break;
                                case 'select':
                                    for(var i = 0, len = input.options.length; i < len; i++) {
                                        var value = localStorage[items] || defaultFields[items];
                                        if (input.options[i].value == value) {
                                            input.options[i].selected = 'selected';
                                        }
                                    }
                                    break;
                                default:
                                    input.value = localStorage[items] || defaultFields[items];
                                    break;
                            }
                        }
                    };

                    Event.on('act:clear_console', 'click', function(e){
                        Event.stopEvent(e);
                        var target = Event.getTarget(e);
                        Helper.Logger.clear();
                        Dom.setAttribute(target, 'disabled', 'disabled');
                    });

                    Event.on('act:clear_tweets', 'click', function(e) {
                        Event.stopEvent(e);
                        var target = Event.getTarget(e);
                        try {
                            var channels = ['timeline', 'friends', 'replies', 'directs', 'favourite'];
                            for (var i = 0, len = channels.length; i < len; i++) {
                                Tweets.clearList(channels[i]);
                            }
                        } catch(e) {
                            console.error('isTwitterLogin: Tweets.clearList error');
                        }
                        Dom.setAttribute(target, 'disabled', 'disabled');
                    });

                    Event.on('act:visit_homepage', 'click', function(e) {
                        Event.stopEvent(e);
                        chrome.tabs.create({url: 'http://lab.gracecode.com/metrist/'});
                    });

                    Event.on('formMain', 'submit', function(e) {
                        Event.stopEvent(e);
                        for(items in defaultFields) {
                            var input = Dom.get(items);
                            if (input) {
                                switch(input.nodeName.toLowerCase()) {
                                    case 'input':
                                        if (/text|password/.test(input.type)) {
                                            localStorage[items]  = input.value;
                                        } else if (input.type == 'checkbox')  {
                                            localStorage[items] = input.checked ? 'yes' : 'no';
                                        }
                                        break;
                                    case 'select': default:
                                        localStorage[items] = input.value;
                                        break;
                                }
                            }
                        };

                        try {
                            // get background page handle and restart the servers
                            var backgroundPage = chrome.extension.getBackgroundPage();
                            if (Lang.isObject(backgroundPage)) {
                                backgroundPage.Server.restart();
                            }
                        } catch(e) {
                            console.error('Options: Restart Server Error');
                        }
                        window.close();
                    });
                }();
            </script>
        </div>
    </body>
</html>
